<template>
    <!-- 法人公司搜索条件组件 -->
    <div class="company-search-sec">
        <el-form :inline="true" :model="formInline" :ref="searchFormName" label-position="right" label-width="120px">
            <el-row :gutter="0">
                <el-col :span="6">
                    <el-form-item label="公司名称：" prop="companyName">
                        <el-input v-model="formInline.companyName" placeholder="请输入" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="法人姓名：" prop="legalPersonName">
                        <el-input v-model="formInline.legalPersonName" placeholder="请输入" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="公司成立年度：" prop="yearEstablished">
                        <el-date-picker
                            v-model="formInline.yearEstablished"
                            type="year"
                            value-format="yyyy"
                            placeholder="请选择">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-link :underline="false" type="primary" class="underline" @click="resetForm(searchFormName)">清除搜索</el-link>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch">搜索</el-button>
                    </el-form-item>
                </el-col>
                <!-- 高级搜索折叠条件 -->
                <el-col :span="2">
                    <collapse-link/>
                </el-col>
            </el-row>
            <!-- 高级搜索条件区域 start -->
            <collapse-item>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="注册地址：" prop="registeredAddress">
                            <el-input v-model="formInline.registeredAddress" placeholder="请输入" clearable>
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="登记注册类型：" prop="registeredType">
                            <el-select v-model="formInline.registeredType" placeholder="请选择" clearable>
                                <el-option
                                    v-for="item in registeredTypeOptions"
                                    :key="item.label"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="牌照办理进度：" prop="progress">
                            <el-select v-model="formInline.progress" placeholder="请选择" clearable>
                                <el-option
                                    v-for="item in progressOptions"
                                    :key="item.label"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </collapse-item>
            <!-- 高级搜索条件区域 end -->
        </el-form>
    </div>
</template>

<script>
    // 引入折叠搜索条件组件
    import collapseLink from "../../components/searchCollapse/collapseLink";
    import collapseItem from "../../components/searchCollapse/collapseItem";

    export default {
        name: "companySearch",
        data() {
            return {
                searchFormName: 'searchForm',   // 搜索表单名称
                formInline: {
                    companyName: '',            // 公司名称
                    legalPersonName: '',        // 法人姓名
                    yearEstablished: '',        // 公司成立年度
                    registeredAddress: '',      // 注册地址
                    registeredType: '',         // 登记注册类型
                    progress: ''                // 牌照办理进度
                },
                registeredTypeOptions: [{
                    value: '有限责任公司',
                    label: '有限责任公司'
                }, {
                    value: '股份有限公司',
                    label: '股份有限公司'
                }, {
                    value: '私营企业',
                    label: '私营企业'
                }, {
                    value: '国有企业',
                    label: '国有企业'
                }],
                progressOptions: [{
                    value: '未办理',
                    label: '未办理'
                }, {
                    value: '办理中',
                    label: '办理中'
                }, {
                    value: '已办理',
                    label: '已办理'
                }],
            }
        },
        methods: {
            // 点击搜索
            onSearch() {
                console.log(this.formInline);
                console.log('点击搜索...');
            },
            // 重置搜索表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        components: {collapseLink, collapseItem}
    }
</script>

<style lang="less" scoped>
    /* 搜索条件区域 */
    .company-search-sec {
        text-align: left;
        /* 链接下划线 */
        .underline {
            text-decoration: underline;
        }
        /* 输入框宽度 */
        /deep/ .el-input {
            width: 180px;
        }
    }
</style>
